<template>
	<view class="page" :style="'background-image: url('+indexBg+');'">
    <u-navbar :fixed="false" title="选择对象" placeholder bgColor="transparent"></u-navbar>
    <view class="search-box">
      <u-search v-model="searchVal" searchIconColor="#3ec1ba" :inputStyle="{borderRadius: '16rpx'}" shape="square"
        bgColor="#fff" height="76rpx" placeholder="请输入" :showAction="false" @search="search" @clear="search" />
      <u-checkbox-group v-model="statusFlag" placement="column" @change="statusChange"
        activeColor="#fff" iconColor="#2b8e88">
        <u-checkbox label="仅显示在册" name="在册" labelColor="#fff" />
      </u-checkbox-group>
    </view>
    <u-checkbox-group placement="row" v-model="selectIdList">
      <view class="list">
        <view class="list-item" v-for="item in treeList" :key="item.id">
          <view>{{ item.investorName }}</view>
          <u-checkbox :name="item.id" shape="circle" activeColor="#388b87" />
        </view>
      </view>
    </u-checkbox-group>
    <view v-if="treeList.length == 0" class="a-empty"><a-empty></a-empty></view>
    <view class="footer-primary-btn" @click="selectFile">确定</view>
	</view>
</template>

<script>
import { getListInvestor, addContract } from '@/api/index'
import { uploadFile } from '@/common/util'

export default {
  data() {
    return {
      indexBg: 'https://gowork365.com/prod-api/profile/mini/index/indexBg1.png',
      searchVal: '',
      treeList: [],
      oldTreeList: [],
      statusFlag: ['在册'],
      selectIdList: [],
      type: '',
    }
  },
  watch: {
    statusFlag() {
      this.getTree();
    },
  },
  onLoad(options) {
    if(options.type) {
      this.type = options.type
    }
    this.getTree();
  },
  methods: {
    getTree() {
      getListInvestor({status: this.statusFlag.length?'在册':'历史'}).then(response => {
        this.treeList = response.data
        this.oldTreeList = response.data
        this.searchVal = ''
      });
    },
    search() {
      if(this.searchVal) {
        this.treeList = this.oldTreeList.filter(v => v.investorName.includes(this.searchVal))
      } else {
        this.treeList = this.oldTreeList
      }
    },
    statusChange(e) {
      this.statusFlag = e
      this.getTree()
    },
    async selectFile() {
      const that = this
      if(this.selectIdList.length == 0) {
        uni.showToast({
          icon: 'none',
          title: '请选择对象!'
        })
        return
      }
      if(this.type == '1') {
        let pages = getCurrentPages()
        let prevPage = pages[pages.length - 2]
        prevPage.$vm.checkedList = this.oldTreeList.filter(v => this.selectIdList.findIndex(j => v.id == j) != -1 )
        this.goBack()
        return
      } else {
        const file = await uploadFile()
        if(file.code != 200) {
          return
        }
        const fileUrl = file.fileName
        const fileName = file.newFileName
        const params = {
          contractUrl: fileUrl,
          contractName: fileName,
          userIds: this.selectIdList.join(','),
          contractType: '公司治理'
        }
        addContract(params).then(response => {
          uni.showToast({
            icon: 'none',
            title: '新增成功',
          })
          setTimeout(() => {
            that.goBack(1)
          }, 1000)
        });
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.page{
	width: 750rpx;
	min-height: 100vh;
  background: #F4F7F6;
  position: relative;
  background-repeat: no-repeat;
  background-size: 750rpx 348rpx;
  padding-bottom: 180rpx;
  .search-box {
    width: 686rpx;
    margin: 48rpx auto 82rpx;
    display: flex;
    align-items: center;
    gap: 36rpx;
  }
  .list {
    width: 686rpx;
    margin: 0 auto;
    background: #FFFFFF;
    box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(11,102,97,0.2);
    border-radius: 16rpx;
    padding: 0 32rpx;
    .list-item {
      padding: 32rpx 0;
      border-bottom: 2rpx dashed #EDF3F1;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      color: rgba(0,0,0,0.85);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 40rpx;
    }
    .list-item:last-child {
      border: none;
    }
  }
}
</style>
